<template>
	<el-dialog :showEdit width="40%" align="left" :close-on-click-modal="false" @close="closeDialog(ruleFormRef)">
		<TitleBox :title="title"></TitleBox>
		<el-form class="layout-form" :rules="rules" :model="editData" ref="ruleFormRef">
			<el-form-item label="医院名称" label-width="100px" prop="hospitalName">
				<el-input placeholder="请输入医院名称" v-model="editData.hospitalName"></el-input>
			</el-form-item>
			<el-form-item label="联系人" label-width="100px" prop="contact">
				<el-input placeholder="请输入联系人姓名" v-model="editData.contact"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" label-width="100px" prop="phone">
				<el-input placeholder="请输入联系电话" v-model="editData.phone"></el-input>
			</el-form-item>
			<el-form-item label="医院地址" label-width="100px" prop="address">
				<el-input placeholder="请输入详细地址" v-model="editData.address"></el-input>
			</el-form-item>
			<el-form-item class="el-form-footer">
				<el-button style="background-color: #ccc;color: white;" @click="handleCancle">取消</el-button>
				<el-button type="primary" @click="handleConfirm">确定</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script setup lang='ts'>
import { reqConfirmHospital, reqEditHospitial } from '@/api/hospital';
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import TitleBox from '@/components/titleBox/index.vue';
const title = ref('编辑医院');
const props = defineProps(['id', 'showEdit']);
const emit = defineEmits(['cancle', 'confirm']);

// 编辑回显数据
const editData: any = reactive({
	"hospitalId": '',
	"hospitalName": '',
	"contact": "",
	"phone": "",
	"address": "",
})
// 表单校验
const ruleFormRef = ref();
const rules = reactive({
	hospitalName: [
		{ required: true, message: '请输入医院名称', trigger: 'blur' },
	],
	contact: [
		{ required: true, message: '请输入联系人', trigger: 'blur' },
	],
	phone: [
		{ required: true, message: '请输入联系电话', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
	],
	address: [
		{ required: true, message: '请输入医院地址', trigger: 'blur' },
	]
})

// 获取当前点击的医院数据
const getHospitalData = async () => {
	try {
		const result = await reqEditHospitial(props.id);
		// console.log('result当前id',result);
		for (let key in editData) {
			editData[key] = result.data.result[key];
		}
	} catch (error) {
		console.log("服务器出错", error);
	}
}
// 观察id是否变化
watch(props, () => {
	getHospitalData();
}, { deep: true })


// 确定
const handleConfirm = async () => {
	try {
		editData.hospitalId = props.id;
		const res = await reqConfirmHospital(editData);
		// console.log("修改提交数据", res);
		if (res.data.code === 0) {
			ElMessage({
				type: 'success',
				message: '修改成功',
			})
			emit('confirm');
		}
	} catch (error) {
		console.log('服务器出现问题');
	}
}
// 取消
const handleCancle = () => {
	emit('cancle');
}
// 关闭对话框，清空数据
const closeDialog = (formEl: any) => {
	if (!formEl) return;
	formEl.resetFields();
}
</script>

<style scoped lang='scss'>
.layout-form {
	margin-top: 30px;

	// 密码报错提示
	:deep(.el-form-item__error) {
		left: 10px;
	}

	.el-input {
		width: 90%;
		margin-left: 10px;
	}

	.el-form-footer {
		margin-top: 30px;
		margin-left: 70%;
	}
}
</style>